@utility c-radio {
	@layer components {
		--radio-color-fg: var(--color-fg);
		--radio-hover-color: var(--color-blue-500);
		--radio-color-bg: var(--color-bg);

		cursor: pointer;

		width: 1.5rem;
		height: 1.5rem;
		padding: 0;

		appearance: none;
		border-color: var(--radio-color-fg);
		border-width: 1px;
		border-radius: 50%;

		&:--checked {
			background-color: var(--radio-color-fg);
			box-shadow: 0 0 0 4px var(--radio-color-bg) inset;
			animation: radiomark 200ms ease-out;
		}

		&:--disabled {
			cursor: not-allowed;
			background-color: var(--color-bg-100);
		}
	}
}

@keyframes radiomark {
	0% {
		box-shadow: 0 0 0 12px var(--radio-color-bg) inset;
	}

	50% {
		box-shadow: 0 0 0 3px var(--radio-color-bg) inset;
	}

	100% {
		box-shadow: 0 0 0 4px var(--radio-color-bg) inset;
	}
}
